<!--
 * @Author: your name
 * @Date: 2021-12-10 15:25:52
 * @LastEditTime: 2021-12-10 16:05:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Vue\12.10vue\shopCar.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
        }

        #app {
            display: flex;
            flex-direction: column;
        }

        header {
            width: 100%;
            height: 50px;
            background: #ffc;
            text-align: center;
            line-height: 50px;
        }

        main {
            flex: 1;
            overflow-y: scroll;
            background: #fcc;
        }

        footer {
            width: 100%;
            height: 50px;
            background: #ffc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
        }

        li {
            width: 100%;
            height: 150px;
            display: flex;
            align-items: center;
        }

        li input {
            width: 20px;
            height: 20px;
        }

        li img {
            width: 100px;
            height: 100px;
            margin: 0 10px;
        }

        li button {
            width: 40px;
            height: 30px;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <header>购物车</header>
        <main>
            <h1>
                <input type="checkbox" v-model="allCheck" @change="changeCheck">全选
            </h1>
            <ul>
                <li v-for="item in list">
                    <input type="checkbox" v-model="item.isCheck">
                    <img :src="item.img" alt="">
                    <div>
                        <h3>{{item.title}}</h3>
                        <p>￥{{item.price}}</p>
                        <div>
                            <button>-</button>
                            <span>{{item.num}}</span>
                            <button>+</button>
                        </div>
                    </div>
                </li>
            </ul>
        </main>
        <footer>
            <span><input type="checkbox" v-model="allCheck" @change="changeCheck">全选</span>
            <b>总价:0</b>
            <button class="jiesuan" :disable="!dis">结算</button>
        </footer>
    </div>
    <script src="./vue.js"></script>
    <script src="./mock.js"></script>
    <script>
        const data = Mock.mock({
        'list|3': [{
            img: '@image(100x100,@color)',
            title: '@ctitle(3,5)',
            'price|10-100.2': 0,
            id: '@id',
            num: 1,
            isCheck: false
        }]
    })
    console.log(data);
    const vue=new Vue({
        el:'#app',
        data(){
            return {
                list:data.list,
                allCheck:false,
                dis:false
            }
        },
        methods: {
            changeCheck() {
                console.log(this.allCheck);
                this.list.forEach((v)=>{
                    v.isCheck=this.allCheck
                })
            },
        watch:{
            list:{
                handler(newValue,oldValue){
                    console.log(newValue,oldValue);
                    this.allCheck=newValue.every((v) => {
                        return v.isCheck
                    })
                    this.dis=newValue.some((v) => {
                        return v.isCheck
                    })
                },
                deep:true,
            },
            allCheck:{
                handler(newValue,oldVaule){
                    console.log('全选按钮的监听',newValue,oldValue);
                }
            }
        }
        },
    })
    </script>
</body>
</html>